<template>
  <div class="noContent">
    <div class='noImg' :class="imgIcon"></div>
    <div class="content">{{content}}</div>
    <slot name="add"></slot>
  </div>
</template>

<script>

  export default {
    data() {
      return {}
    },
    props: {
      imgIcon: {
        type: String,
        default: 'noRaindrop'
      },
      content: {
        type: String,
        default: 'No Content'
      }
    },

    methods: {}

  }
</script>
<style scoped lang="scss">
  .noContent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .noImg {
      width: 356px;
      height: 320px;
      background: url("../../assets/images/13.png") no-repeat center;
      -webkit-background-size: 100%;
      background-size: 100%;
    }

    .noRaindrop {
      background-image: url("../../assets/images/13.png");
    }

    .nocomment {
      margin-top: 80px;
      background-image: url("../../assets/images/7.png");
    }

    .meNoIcon {
      margin-top: 80px;
      background-image: url("../../assets/images/17.png");
    }

    .content {
      width: 100%;
      color: #999999;
      text-align: center;
      height: 36px;
      font-size: 32px;
      margin-top: 40px;
    }

    .addRain {
      margin-top: 80px;
      width: 344px;
      height: 84px;
      background: rgba(36, 205, 193, 1);
      border-radius: 42px;
      color: #ffffff;
      line-height: 84px;
      text-align: center;
    }
  }
</style>
